<template>
  <div>
    <select id="select" multiple="multiple" class="multiple-select">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4" selected>April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
  </div>
</template>

<script>
import '@/components/FormGenerator/components/ts-components/tableSheet/utils/multipleSelect/index.js'
import $ from 'jquery'

export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    let $select = $('.multiple-select')
    $select.multipleSelect({
      locale: 'zh-CN',
      ellipsis: false,
      minimumCountSelected: 2,
      onClick: function (view) {
        console.log('onClick event fire! view: ' + JSON.stringify(view) + '\n')
        console.log('this', this)
        console.log('$select', $select)
        let data = $select.multipleSelect('getData')
        console.log('data', data)
        /*
        data.filter(item => item.selected).forEach(item => {
          console.log('选中项：', item)
        })
        */
        let select = document.getElementById('select')
        console.log('select', select.value)
      },
      onClose: function () {
        let data = $select.multipleSelect('getData')
        console.log('data', data)
      },
    })
  },
  methods: {},
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
